<template>
  <div class="backend-container">
    <!-- 头部 -->
    <div class="backend-header">
      <div class="header-left">
        <h2 class="system-title">🛠️ 求职招聘平台 - 系统管理</h2>
      </div>
      <div class="header-right">
        <span class="username">{{ userInfo.username || '管理员' }}</span>
        <el-button type="danger" size="small" @click="handleLogout">退出登录</el-button>
      </div>
    </div>

    <div class="backend-body">
      <!-- 侧边栏菜单 -->
      <div class="backend-aside">
        <el-menu
          :default-active="activeMenu"
          class="aside-menu"
          background-color="#344a5f"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard">
            <el-icon><DataBoard /></el-icon>
            <span>数据概览</span>
          </el-menu-item>
          
          <el-sub-menu index="user-mgmt">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="user-list">用户列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="enterprise-mgmt">
            <template #title>
              <el-icon><OfficeBuilding /></el-icon>
              <span>企业管理</span>
            </template>
            <el-menu-item index="enterprise-list">企业列表</el-menu-item>
            <el-menu-item index="employee-list">员工列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="job-mgmt">
            <template #title>
              <el-icon><Briefcase /></el-icon>
              <span>招聘管理</span>
            </template>
            <el-menu-item index="job-list">岗位列表</el-menu-item>
            <el-menu-item index="application-list">投递记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="resume-mgmt">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>简历管理</span>
            </template>
            <el-menu-item index="resume-list">在线简历</el-menu-item>
            <el-menu-item index="pdf-resume-list">PDF简历</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="interview-mgmt">
            <template #title>
              <el-icon><MessageBox /></el-icon>
              <span>面试管理</span>
            </template>
            <el-menu-item index="question-manage">题库管理</el-menu-item>
            <el-menu-item index="experience-manage">经验管理</el-menu-item>
            <el-menu-item index="schedule-manage">日程管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>

      <!-- 主要内容区域 -->
      <div class="backend-main">
        <component :is="currentComponent" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  DataBoard, 
  User, 
  OfficeBuilding, 
  Briefcase, 
  Document, 
  MessageBox 
} from '@element-plus/icons-vue'
import useStore from '@/store'

// 导入管理组件
import DashboardView from './components/DashboardView.vue'
import UserManage from './components/UserManage.vue'
import EnterpriseManage from './components/EnterpriseManage.vue'
import EmployeeManage from './components/EmployeeManage.vue'
import JobManage from './components/JobManage.vue'
import ApplicationManage from './components/ApplicationManage.vue'
import ResumeManage from './components/ResumeManage.vue'
import PdfResumeManage from './components/PdfResumeManage.vue'
import QuestionManage from './QuestionManage.vue'
import ExperienceManage from './ExperienceManage.vue'
import ScheduleManage from './components/ScheduleManage.vue'

const router = useRouter()
const store = useStore()
const activeMenu = ref('dashboard')
const userInfo = ref({
  username: '系统管理员',
  role: 'admin'
})

// 组件映射表
const componentMap = {
  'dashboard': DashboardView,
  'user-list': UserManage,
  'enterprise-list': EnterpriseManage,
  'employee-list': EmployeeManage,
  'job-list': JobManage,
  'application-list': ApplicationManage,
  'resume-list': ResumeManage,
  'pdf-resume-list': PdfResumeManage,
  'question-manage': QuestionManage,
  'experience-manage': ExperienceManage,
  'schedule-manage': ScheduleManage
}

// 当前显示的组件
const currentComponent = shallowRef(DashboardView)

// 菜单选择处理
const handleMenuSelect = (index) => {
  activeMenu.value = index
  if (componentMap[index]) {
    currentComponent.value = componentMap[index]
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    await store.app.logoutAction()
    ElMessage.success('退出成功')
    router.push('/login')
  } catch (e) {
    // 即使接口失败也清除本地数据并跳转
    console.error('退出登录失败:', e)
    ElMessage.success('退出成功')
    router.push('/login')
  }
}

// 获取用户信息
onMounted(() => {
  // 优先从 store 获取用户信息
  if (store.app.username) {
    userInfo.value = {
      username: store.app.username,
      role: store.app.role || 'admin',
      avatar: store.app.avatar
    }
  } else {
    // 兼容旧的本地存储方式
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      try {
        userInfo.value = JSON.parse(storedUserInfo)
      } catch (e) {
        console.error('解析用户信息失败:', e)
      }
    }
  }
})
</script>

<style scoped>
/* 整体容器 */
.backend-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}

/* 头部 */
.backend-header {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.system-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.username {
  color: #666;
  font-size: 14px;
}

/* 主体区域 */
.backend-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 侧边栏 */
.backend-aside {
  width: 200px;
  background-color: #344a5f;
  overflow-y: auto;
}

.aside-menu {
  border: none;
}

/* 主要内容区域 */
.backend-main {
  flex: 1;
  background-color: #f7f7f7;
  padding: 20px;
  overflow-y: auto;
}

/* 滚动条样式 */
.backend-aside::-webkit-scrollbar,
.backend-main::-webkit-scrollbar {
  width: 6px;
}

.backend-aside::-webkit-scrollbar-track,
.backend-main::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.backend-aside::-webkit-scrollbar-thumb,
.backend-main::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.backend-aside::-webkit-scrollbar-thumb:hover,
.backend-main::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
